<template>
  <view class="page-wrapper">
    <u--form labelPosition="left" ref="formRef" label-width="70px" :model="shipping">
      <view class="item">
        <view class="car-item">
          <view class="car-content">
            <u-form-item prop="name">
              <u--input type="textarea" border="none" v-model="shipping.name" :showWord-limit="true" maxlength="30" :clearable="true">
              </u--input>
            </u-form-item>
          </view>
        </view>
      </view>
    </u--form>
    <view class="hint">{{setHint}}</view>
    <view class="action-bottom">
      <u-button text="确认" color="#CF1A1B" @click="handleAction(type)"></u-button>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        shipping: {
          name: '',
        },
        type: '',
        rulesNickName: {
          name: [
            {
              required: true,
              message: '请输入',
              trigger: ['change', 'blur'],
            }
          ]
        },   
        rulesDriverName: {
          name: [
            {
              required: true,
              message: '请输入',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return uni.$u.test.chinese(value);
              },
              message: '名称不正确',
              trigger: ['change', 'blur'],
            }
          ]
        },
      };
    },
    
    computed: {
      setHint() {
        if(this.type === 'nickName') {
          return '此昵称非真实姓名，仅用于发现评论等场景里使用'
        } else {
          return '请填写真实姓名，用于下单或者客服联系您核实订单信息时使用'
        }
      }
    },
    
    methods: {
      async handleAction(type) {
        await this.$refs.formRef.validate()
        let params = {
          name: '',
          nickname: ''
        }
        if(type === 'nickName') {
          params.nickname = this.shipping.name
          delete params.name
        } else {
          params.name = this.shipping.name
          delete params.nickname
        }
        this.$request({
          method: 'POST',
          url: '/user-center/app/users/updateInfo',
          data:params
        }).then((res) => {
          if (res && res.respCode === 200) {
            uni.showToast({
              title: type==='nickName'?'昵称设置成功': '名称设置成功',
              complete: function(res) {
                uni.$emit('refreshData', '')
                setTimeout(() => {
                  uni.navigateBack()
                }, 500)
              }
            })
          }
        }).catch((e) => {
          console.log('保存收获失败', e)
        })
      },
    },
    onLoad(query) {
      const {
        type,
        info
      } = query
      this.type = type
      if (info) {
        let data = JSON.parse(decodeURIComponent(info));
        let { nickname, name} = data
        if (this.type === 'nickName') {
          this.shipping.name = nickname
        } else {
          this.shipping.name = name
        }
      }
      if (this.type === 'nickName') {
        this.$refs.formRef.setRules(this.rulesNickName)
        uni.setNavigationBarTitle({
          title: '修改昵称'
        })
      } else if (this.type === 'driverName') {
        this.$refs.formRef.setRules(this.rulesDriverName)
        uni.setNavigationBarTitle({
          title: '修改司机姓名'
        })
      }
    },
  }
</script>

<style lang="scss" scoped>
  .page-wrapper {
    .item {
      margin-bottom: 20rpx;
      background-color: #FFFFFF;
      padding-bottom: 8rpx;
      padding: 32rpx;
    }
    
    .hint {
      margin-top: 40rpx;
      margin-left: 26rpx;
      font-size: 28rpx;
      font-weight: 400;
      color: #CF1A1B;
    }
    .action-bottom {
      height: 70px;
      width: 100%;
      position: fixed;
      bottom: 0;
      display: flex;
      align-items: center;
      background-color: #FFFFFF;
      justify-content: center;
      /deep/ .u-button {
        width: 90% !important;
      }
    }
  }
  /deep/ .u-form-item__body__right__message {
    margin-left: 0 !important;
  }
</style>